<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
    <!-- 需要用到jQurey吗？？ -->
</head>
<body>
    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    Id:
                    <input type="text" class="form-control" v-model="id">
                </label>

                <label>
                    Name:
                    <input type="text" class="form-control" v-model="name" @keyup.f2="add">
                </label>

                <!--
                    在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，
                    就可以给函数传递参数了
                -->
                <input type="button" value="添加" class="btn btn-primary" @click="add()">

                <label>
                    索引名称关键字：
                    <!-- 注意：Vue中所有的指令，在调用时候，都以v-开头 -->
                    <input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'">
                </label>
            </div>
        </div>

        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <!-- 
                    之前，v-for中的数据，都是直接从data上的list中直接渲染过来的
                    现在，我们自定义了一个search方法，同时把所有的关键字，通过传参
                    的形式，传递给了search方法

                    在search方法内部，通过执行for循环，把所有符合搜索关键字的数据，
                    保存到一个新的数组中返回
                 -->
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td v-text="item.name"></td>
                    <td>{{ item.ctime | dateFormat('')}}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="app2">
        <h3 v-color="'pink'" v-fontweight="'900'" v-fontsize="'50px'">
            {{ dt | dateFormat('')}}
        </h3>
    </div>

    <script>
        // 全局的过滤器，进行时间的格式化
        // 所谓的全局过滤器，就是所有的VM实例共享的
        Vue.filter('dateFormat', function(dateStr, pattern) {
            // 根据给定的时间字符串得到特定的时间
            var dt = new Date(dateStr);
            // yyyy-MM-dd
            var y = dt.getFullYear();
            var m = dt.getMonth() + 1;
            var d = dt.getDate();
           
            if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
                return y + '-' + m + '-' + d;
            } else {
                var hh = dt.getHours();
                var mm = dt.getMinutes();
                var ss = dt.getSeconds();
                return  y + '-' + m + '-' + d 
                    + " " + hh + ':' + mm + ":" + ss;
            }
        });

        // 自定义全局按键修饰符
        Vue.config.keyCodes.f2 = 113;

        // 使用Vue.directive()定义全局的指令 v-focus
        // 其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面，
        // 不需要添加 v- 前缀，但是在调用的时候必须在指令名称前加上 v- 
        // 前缀来进行调用
        // 
        // 参数2：是一个对象，这个对象身上，有一些指令相关的函数，
        // 这些函数在特定的阶段，执行相关的操作
        Vue.directive('focus', {
            // 每当指令绑定到元素上的时候会立即执行这个bind函数，只执行一次
            bind: function(el) {
                // 注意：在每个函数中，第一个参数，永远是el，表示被绑定
                // 了指令的那个元素，这个el参数，是一个原生的JS对象
                // 在元素刚绑定了指令的时候还没有插入到DOM中去，这时候，调用focus方法没有作用
                // 因为，一个元素，只有插入DOM之后才能获取焦点
                // el.focus();
            },
            // 表示元素插入到DOM中的会执行inserted函数[触发一次]
            inserted: function(el) {
                el.focus();
                // 和JS行为有关的操作，最好在inserted中去执行，防止JS行为不生效
            },
            // 当VNode更新的时候会执行updated，可能会触发多次
            updated: function() {}
        });

        // 自定义一个设置字体颜色的指令
        Vue.directive('color', {
            // 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，
            // 这个元素肯定有了一个内联的样式
            // 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，
            // 应用给这个元素
            bind: function(el, binding) {
                // el.style.color = 'red';
                // console.log(binding, binding.name);
                console.log(binding.value);
                // console.log(binding.expression);
                // 和样式相关的操作一般都可以在bind中执行

                el.style.color = binding.value;
            }
        });

        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                keywords: '',   // 搜索关键字
                list:[
                    { id: 1, name: '奔驰', ctime: new Date() },
                    { id: 2, name: '宝马', ctime: new Date() }
                ]
            },
            methods: {
                add() {  // 这是添加的方法
                    // console.log("OK");
                    // 分析
                    // 1、获取id和name，直接从data上获取
                    // 2、组织出一个对象
                    // 3、把这个对象，调用数组的相关方法，添加到当前data上的list中去
                    // 4、注意:在Vue中已经实现了数据的双向绑定，每当我们修改了data中
                    //    的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用
                    //    到页面上
                    // 5、当我们意识到上面的第四步的时候就证明大家已经入门了Vue了，我们
                    //    更多的是在进行VM中Model数据的操作，同时，在操作Model数据的
                    //    时候，指定的业务操作
                    var car = { id: this.id, name: this.name, ctime: new Date() };
                    this.list.push(car);
                    this.id = '';
                    this.name = '';
                },
                del(id) {  // 根据id删除数据
                    // 分析
                    // 1、如何根据id找到要删除这项的索引
                    // 2、如果找到索引了，直接调用咱们数组的splice方法

                    // this.list.some((item, i)=>{
                    //     if (item.id == id) {
                    //         this.list.splice(i, 1);
                    //         // 在数组的some方法中，如果return true，就会立即终止
                    //         // 这个数组的后续循环
                    //         return true;
                    //     }
                    // });

                    var index = this.list.findIndex(item => {
                        if (item.id == id) {
                            return true;
                        }
                    });
                    console.log(index);
                    this.list.splice(index, 1);
                },
                search(keywords) {   // 根据关键字，进行数据的搜索
                    // var newList = [];
                    // this.list.forEach(item => {
                    //     if (item.name.indexOf(keywords) != -1) {
                    //         newList.push(item);
                    //     }
                    // });
                    // return newList;
                    
                    // 注意： forEach some filter findIndex 
                    // 这些都属于数组的新方法
                    // 都会对数组中的每一项进行遍历，执行相关的操作
                    return this.list.filter(item =>{
                        // 注意：ES6z中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')
                        // 如果包含，则返回true，否则返回false
                        // contains
                        if (item.name.includes(keywords)) {
                            return item;
                        }
                    });
                }
            }
        });

        // 如何定义一个私有的过滤器
        var vm2 = new Vue({
            el: '#app2',
            data: {
              dt: new Date() 
            },
            methods: {},
            // 定义私有过滤器，过滤器有两个条件，过滤器名称和处理函数
            filters: {
                // 过滤器调用的时候采用的是就近原则
                // 如果私有过滤器和全局过滤器一致
                // 优先调用私有过滤器
                dateFormat: function(dateStr, pattern) {
                    // 根据给定的时间字符串得到特定的时间
                    var dt = new Date(dateStr);
                    // yyyy-MM-dd
                    var y = dt.getFullYear();
                    var m = (dt.getMonth() + 1).toString().padStart(2, '0');
                    var d = (dt.getDate()).toString().padStart(2, '0');
                
                    if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return y + '-' + m + '-' + d;
                    } else {
                        var hh = dt.getHours().toString().padStart(2, '0');
                        var mm = dt.getMinutes().toString().padStart(2, '0');
                        var ss = dt.getSeconds().toString().padStart(2, '0');
                        return  y + '-' + m + '-' + d 
                            + " " + hh + ':' + mm + ":" + ss + " ~~~~~~~";
                    }
                }
            },
            // 自定义私有指令
            directives: {
                // 设置字体粗细的
                'fontweight': {
                    bind: function(el, binding) {
                        el.style.fontWeight = binding.value;
                    }
                },
                // 注意这个function等同于把代码写到bind和update中去
                'fontsize': function(el, binding) {
                    el.style.fontSize = parseInt(binding.value) + 'px';
                }
            }
        });

        // 过滤器的定义语法
        // Vue.filter('过滤器的名称', function() {})
        // 过滤器中的function，第一个参数，已经被定义死了，永远都是过滤器
        // 管道符前面传递过来的数据
        // Vue.filter('过滤器的名称', function(data) {
        //     return data + '123';
        // });

        // document.getElementById('search').focus();
    </script>
</body>
</html>

<!-- 过滤器调用时候的格式  {{ name | 过滤器的名称 }} -->